〜 path の v と a コマンド / パラメーターの解説

<path fill="none" stroke="red" d="M200 200v-150a100 120 45 1 0 100 150z"/>

パスデータ v , a コマンドとパラメーター

M200 200 が アンカーポイント-その1 「始点」.

v-150 vertical に -150 (マイナスなので上方向に)移動して座標 200 50 にアンカーポイント-その2 を作る.

a100 120 の 小文字 a は elliptical arc (パラメータに基づいて楕円曲線のパスを作るコマンド)で, 最後のポイント 200 50 から反時計回りに楕円を作る. 二つの半径は x100(横幅), y120(天地) なので, その形は少し縦長の楕円となる. 実際の楕円の中心点は自動計算されている.

次の 45 は円弧に対する角度(deg).

次の 1は円弧の大きさ(これは大小のどちらか, すなわち 1 が大きい円弧で 0 が小さい円弧 / このどちらかを選択する).

次の 0 は円弧を描く向き(時計回りなら 1 / 反時計回りなら 0 を選択する.

100 150z アンカーポイント-その3 「終点」の座標を作り, ここでパスが切れる. そこから z コマンドでパスを「始点」まで繋ぐ.